<template>
    <div>
        <el-upload ref="upflie" class="myUploadFile" :class="{'longW':fileType=='video'}" :disabled="disabled"
            :action="action"
            list-type="picture-card"
            :show-file-list="false"
            :on-preview="handlePictureCardPreview"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :file-list="businessLicense"
            :limit="5"
            :on-remove="handleRemove" v-loading="loading">

            <template v-if="fileType=='img'">
                <img v-if="uploadResult" :src="uploadResult" class="avatar"/>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </template>

            <div v-else-if="fileType=='video'" class="myvideo">
                <video v-if="uploadResult" ref="videoEle" controls @click.stop="stopdf">
                    <source :src="uploadResult" type="video/mp4">
                    您的浏览器不支持Video标签。
                </video>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div v-if="uploadResult" class="reupbtn">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                </div>
            </div>
            
        </el-upload>
        <!-- <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="uploadResult" alt="">
        </el-dialog> -->
    </div>
    
</template>

<script>
export default {
    props:{
        value:'',
        fileType:{
            type:String,
            default:'img'
        },
        disabled:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return{
            uploadResult:'',
            businessLicense:[],
            loading:false,
            action:''
        }
    },
    watch:{
        // 监听父组件v-model值动态改变时，同步更新
        value(newValue, oldValue){
            this.uploadResult = newValue
        },
    },
    created(){
        this.action = `${process.env.NODE_ENV=='development'?'/fileApi':''}/resource/fileupload/upload`
       this.uploadResult = this.value
    },
    methods:{
        handlePictureCardPreview(file) {
            this.uploadResult = file.url;
            this.dialogVisible = true;
        },
        handleAvatarSuccess(res, file) {
            if (res.success) {
                this.uploadResult = res.url
                this.$emit('input',this.uploadResult)
            } else {
                this.$message({
                    message: res.message,
                    type: 'error'
                })
            }
            this.loading = false
        },
        beforeAvatarUpload(file) {
            if(this.fileType == 'img'){
                const isPic = (file.type === 'image/jpeg') || (file.type === 'image/jpg') || (file.type === 'image/png')
                const isLt2M = file.size / 1024 / 1024 < 3
                if (!isPic) {
                    this.$message.error('请上传格式为JPG, JPEG, PNG的图片')
                    return false
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 3MB!')
                    return false
                }
                // return isPic && isLt2M
            }else if(this.fileType == 'video'){
                if(file.type.toLocaleLowerCase().indexOf('video')<0){
                    this.$message.error('请上传视频文件')
                    return false
                } 
            }  
            this.uploadResult = ''
            this.loading = true          
        },
        handleRemove(file) {
             //this.ruleForm.businessLicense = this.ruleForm.businessLicense.filter(item => item.url != file.url)
        },
        stopdf(){
            return false
        }
    }
}
</script>

<style lang="scss">
    .el-upload--picture-card{
        border-radius:2px !important ;
    }
    .myUploadFile{
        width: 148px;
        height: 148px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .myvideo{
        position: relative;
        z-index: 10;
        width: 100%;
        height: 100%;
        .reupbtn{
            position: absolute;
            z-index: 10;
            right: -210px;
            top: 0;
            width: 200px;
            height: 100%;
            background-color: #fbfdff;
            border: 1px dashed #c0ccda;
            cursor: pointer;
            &:hover{
                i{
                    color: #1a1918;
                }
            }
        }
        video{
            width: 100%;
            height: 100%;
        }
    }
    .myUploadFile.longW{
        width: auto;
        height: auto;
        .el-upload--picture-card{
            width: 100%;
            height: 250px;
            line-height: 250px;
        }
    }
</style>